<!-- 客户版一级标签栏 -->
<template>
	<view class="tabbar-placeholder" :style="{'padding-bottom': safeAreaBottom}">
		<!-- 标签栏 -->
		<view class="fix-wrap tabbar" :style="{'padding-bottom': safeAreaBottom}">
			<template v-for="item in tabbars" :key="item.index">
				<view v-if="item.index == -1" class="center iconfont btn-transition-scale95" @click="handleShowPost()">
					<image class="icon" :src="item.icon" mode="widthFix"></image>
				</view>
				<view v-else :class="['item',{'active':item.index == tabbarIndex}]" @click="handleRelaunch(item)">
					<view class="icon-box">
						<image v-if="item.index == tabbarIndex" class="icon" :src="item.selectIcon" mode="widthFix">
						</image>
						<image v-else :src="item.icon" class="icon" mode="widthFix"></image>
						<view v-if="item.count>0" class="count">{{item.count>99?'99+':item.count}}</view>
					</view>
					<view class="name">{{item.name}}</view>
				</view>
			</template>
		</view>

		<!-- 发布 -->
		<view class="full-screen" v-if="showPost" :class="{'active': showPostAnimate}">
			<view class="bg-box" :style="{'padding-top': navBarHeigth}">
				<image class="bg" src="/static/images/index-customer/post-tabbar-bg.png" mode="widthFix"></image>
			</view>
			<view class="card-box" :style="{'border-top': `${navBarHeigth} solid transparent` }">
				<view class="card">
					<view class="card-item" @click="handleNavTo('/pagesC-post/need/index?tab=1')">
						<image class="icon" src="/static/images/index-customer/post-prevent.svg" mode="widthFix">
						</image>
						<view class="content">
							<text class="title">找飞防</text>
							<text class="label">科技守护万物生长</text>
						</view>
						<text class="iconfont">&#xe601;</text>
					</view>
					<view class="card-item" @click="handleNavTo('/pagesC-post/need/index?tab=2')">
						<image class="icon" src="/static/images/index-customer/post-specialist.svg" mode="widthFix">
						</image>
						<view class="content">
							<text class="title">找专家</text>
							<text class="label">在线解答农技问题</text>
						</view>
						<text class="iconfont">&#xe601;</text>
					</view>
					<view class="card-item" @click="handleNavTo('/pagesC-post/need/index?tab=3')">
						<image class="icon" src="/static/images/index-customer/post-medicine.svg" mode="widthFix">
						</image>
						<view class="content">
							<text class="title">找药剂</text>
							<text class="label">提供专业防控药剂产品</text>
						</view>
						<text class="iconfont">&#xe601;</text>
					</view>
					<view class="card-item" @click="handleNavTo('/pagesC-post/ask/index')">
						<image class="img" src="/static/images/index-customer/quick-ask.png" mode="widthFix">
						</image>
					</view>

					<button class="close-btn iconfont" :style="{'bottom': safeAreaBottom}"
						@click="handleClosePost()">&#xe60d;</button>
				</view>
			</view>
		</view>
	</view>

	<!-- 微信登录 -->
	<c-wx-login-toast></c-wx-login-toast>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { useUserStore } from "@/store/user.js";

	const userStore = useUserStore();
	const props = defineProps({
		index: 0, // tabBar 的哪一项，从左边算起
	});

	// 底部安全距离
	const safeAreaBottom = getApp().globalData.safeAreaBottom + 'px';
	// 导航高度
	const navBarHeigth = getApp().globalData.statusBarHeight + getApp().globalData.navBarHeight + 'px';

	const tabbarIndex = ref(props.index);
	const tabbars = [{
			name: '首页',
			index: 1,
			icon: '/static/images/tabbar-customer/home.svg',
			selectIcon: '/static/images/tabbar-customer/home-active.svg',
			count: 0,
			url: '/pages/index/index'
		},
		{
			name: '消息',
			index: 2,
			icon: '/static/images/tabbar-customer/msg.svg',
			selectIcon: '/static/images/tabbar-customer/msg-active.svg',
			count: 0,
			url: '/pagesC-message/index/index'
		},
		{
			name: '发布',
			index: -1,
			icon: '/static/images/tabbar-customer/post-center.svg',
			selectIcon: '',
			count: 0,
			url: ''
		},
		{
			name: '订单',
			index: 3,
			icon: '/static/images/tabbar-customer/order.svg',
			selectIcon: '/static/images/tabbar-customer/order-active.svg',
			count: 0,
			url: '/pagesC-order/index/index'
		},
		{
			name: '我的',
			index: 4,
			icon: '/static/images/tabbar-customer/my.svg',
			selectIcon: '/static/images/tabbar-customer/my-active.svg',
			count: 0,
			url: '/pagesC-my/index/index'
		}
	];

	// 页面重加载
	const handleRelaunch = (item) => {
		if (props.index == item.index) return;

		if (!item.url) return uni.showToast({ icon: 'none', title: '开发中' });

		uni.reLaunch({
			url: item.url
		});
	}

	// 显示发布的动画
	const showPostAnimate = ref(false);
	const showPost = ref(false);

	// 打开发布
	const handleShowPost = () => {
		showPost.value = true;
		setTimeout(() => {
			showPostAnimate.value = true;
		}, 30);
	}

	// 关闭发布
	const handleClosePost = () => {
		showPostAnimate.value = false;
		setTimeout(() => {
			showPost.value = false;
		}, 500);
	}

	// 页面跳转
	const handleNavTo = (url) => {
		if (!userStore.token) {
			userStore.SET_SHOW_LOGIN_PANEL();
			return;
		}
		
		uni.navigateTo({
			url
		});
		handleClosePost();
	}
</script>

<style lang="scss" scoped>
	.tabbar-placeholder {
		position: relative;
		height: 50px;

		.fix-wrap {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
			width: 100%;
			height: 50px;
			background: #fff;
			border-top: 1rpx solid #eee;
		}
	}

	.full-screen {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1001;
		width: 100%;
		height: 100%;
		background-color: white;

		.bg-box {
			position: relative;
			height: 500rpx;
			transform: translateY(-100%);
			transition: transform 0.5s;

			.bg {
				position: absolute;
				bottom: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.card-box {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding-top: 274rpx;
			transform: translateY(100%);
			transition: transform 0.5s;
		}

		.card {
			height: 100%;
			background-color: white;
			border-radius: 60rpx 60rpx 0 0;
			padding: 50rpx 50rpx 100rpx;
			box-sizing: border-box;

			&-item {
				display: flex;
				align-items: center;
				height: min(20%, 180rpx);
				padding: 0 25rpx;
				border-radius: 20rpx;
				transition: background-color 0.2s;

				&+.card-item {
					margin-top: 5%;
				}

				&:nth-child(1) {
					background-color: #EDF6FF;

					&:active {
						background-color: #dce4ec;
					}
				}

				&:nth-child(2) {
					background-color: #FCF3EE;

					&:active {
						background-color: #eee6e1;
					}
				}

				&:nth-child(3) {
					background-color: #F6F5FF;

					&:active {
						background-color: #ebeaf3;
					}
				}

				&:nth-child(4) {
					padding: 0;
				}

				.icon {
					flex-shrink: 0;
					width: 100rpx;
					height: 100rpx;
				}

				.content {
					flex-grow: 1;
					padding-left: 32rpx;

					.title {
						display: block;
						font-weight: bold;
						font-size: 30rpx;
						color: #222222;
						line-height: 1.5;
					}

					.label {
						display: block;
						font-weight: 500;
						font-size: 24rpx;
						color: #999;
						line-height: 1.5;
					}
				}

				.iconfont {
					flex-shrink: 0;
					font-size: 25rpx;
					color: #222;
				}

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.close-btn {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				display: block;
				width: 14vw;
				height: 14vw;
				font-size: 4.5vw;
				color: #222;
				text-align: center;
				line-height: 14vw;
				border-radius: 50%;
				background-color: #F7F7F7;
				margin-bottom: 30rpx;
			}
		}

		&.active {

			.bg-box,
			.card-box {
				transform: translateY(0);
			}
		}
	}

	.tabbar {
		display: flex;
		justify-content: space-evenly;
		height: 50px;

		.center {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			top: -34rpx;
			width: 114rpx;
			height: 114rpx;
			border-radius: 50%;
			border: 12rpx solid white;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		.item {
			text-align: center;
			color: #999;
			padding: 0 28rpx;

			.name {
				font-size: 24rpx;
			}

			.icon-box {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				margin: 8rpx auto 0;

				.icon {
					width: 80%;
					height: 80%;
				}

				.iconfont {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}

				.count {
					position: absolute;
					left: 28rpx;
					top: -5rpx;
					z-index: 1;
					min-width: 14rpx;
					padding: 0 8rpx;
					height: 30rpx;
					line-height: 30rpx;
					background: #FE3C26;
					border-radius: 38rpx;
					color: #fff;
					font-size: 22rpx;
				}
			}
		}

		.active {
			color: #FE3C26;
		}
	}
</style>